import { useRef } from 'react';
import {
  FooterToolbar,
  ProForm,
  ProFormText,
  ProFormSelect,
  ProFormDateTimePicker,
} from '@ant-design/pro-components';
import { Button, message, Space } from 'antd';
import { history } from 'umi';
import { PageContainer } from '@ant-design/pro-components';
import { activatecodeDetail, activatecodeEdit } from '@/services/sensitizeManage';
import useDetailType from '@/hooks/useDetailType';

import type { ProFormInstance } from '@ant-design/pro-components';

interface IParams {
  type?: string;
  id?: string;
}

import styles from './style.less';

const OptionsActivieCodeStatus = [
  { label: '可激活', value: 0 },
  { label: '已激活', value: 1 },
  { label: '销毁', value: 2 },
  { label: '锁定', value: 3 },
];

const defaultValues = {
  activeCode: '',
  couponCode: '',
  activityId: '',
  groupId: '',
  activieCodeStatus: 0,
  storeId: '',
  orderId: '',
  productId: '',
  lockedTime: null,
  activedTime: null,
  version: '',
};

const SensitizeManageDetail: React.FC = () => {
  const { isAdd, isModify, params } = useDetailType<IParams>();
  const formRef = useRef<ProFormInstance>();

  // 新增或者编辑  表单内容-初始化
  const getDetail = async () => {
    if (params.id && isModify) {
      // 编辑
      const { code, data } = await activatecodeDetail({
        id: params.id,
      });
      if (code === 200 && data) {
        return {
          ...data,
          productId: data.productId,
        };
      }
    }
    return { ...defaultValues };
  };

  const goToList = () => {
    history.push('/profile/sensitizeManage');
  };

  const restProForm = () => {
    formRef.current?.setFieldsValue({
      ...defaultValues,
    });
  };
  const onValueChange = (value: any) => {
    console.log(value, 'onValueChange');
  };

  const onFinish = async (value: Partial<API.RealProfileInfo>) => {
    console.log('onFinish---value', isAdd, isModify, value);
    const param: API.RealProfileInfo = {
      ...value,
      id: params.id,
    };

    const { data, code } = await activatecodeEdit(param);
    if (code === 200 && data) {
      message.success('保存成功');
      goToList();
    }
  };

  return (
    <PageContainer>
      <div className={styles['detail-body']}>
        <>
          <ProForm<Partial<API.ActivatecodeListItem>>
            formRef={formRef}
            layout="horizontal"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            scrollToFirstError
            onValuesChange={onValueChange}
            onFinish={onFinish}
            //@ts-ignore
            request={getDetail}
            submitter={{
              searchConfig: {
                resetText: '返回',
              },
              render: (_, dom) => (
                <FooterToolbar
                  extra={
                    <div style={{ textAlign: 'center', padding: '5px 0' }}>
                      <Space>
                        <Button type="primary" onClick={restProForm}>
                          重置
                        </Button>
                        <Button onClick={goToList}>返回</Button>
                        {dom[1]}
                      </Space>
                    </div>
                  }
                />
              ),
            }}
          >
            <>
              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="activeCode"
                  label="激活码"
                  placeholder="activeCode"
                  rules={[{ required: true, message: '不得为空' }]}
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="couponCode"
                  label="兑换码"
                  placeholder="couponCode"
                  rules={[{ required: true, message: '不得为空' }]}
                />
              </ProForm.Group>

              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="activityId"
                  label="活动Id"
                  placeholder="activityId"
                  rules={[{ required: true, message: '不得为空' }]}
                  disabled={isModify}
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="groupId"
                  label="批次ID"
                  placeholder="groupId"
                  rules={[{ required: true, message: '不得为空' }]}
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormSelect
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="activieCodeStatus"
                  label="激活码状态"
                  placeholder="activieCodeStatus"
                  options={OptionsActivieCodeStatus}
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="storeId"
                  label="激活用餐厅号"
                  placeholder="storeId"
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="orderId"
                  label="激活用订单号"
                  placeholder="orderId"
                />
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="productId"
                  label="收银机售卖产品ID"
                  placeholder="productId"
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormDateTimePicker
                  labelCol={{ span: 8 }}
                  width="lg"
                  label="锁定时间"
                  name="lockedTime"
                  fieldProps={{ format: 'YYYY-MM-DD HH:mm:ss' }}
                />
                <ProFormDateTimePicker
                  labelCol={{ span: 8 }}
                  width="lg"
                  label="激活码时间"
                  name="activedTime"
                  fieldProps={{ format: 'YYYY-MM-DD HH:mm:ss' }}
                />
              </ProForm.Group>
              <ProForm.Group>
                <ProFormText
                  labelCol={{ span: 8 }}
                  width="lg"
                  name="version"
                  label="记录版本号"
                  placeholder="version"
                />
                <div style={{ width: 520 }} />
              </ProForm.Group>
            </>
          </ProForm>
        </>
      </div>
    </PageContainer>
  );
};

export default SensitizeManageDetail;
